<template>
	<div class="tag-wrapper">
		<span v-bind="props" ref="tag" class="tag"></span>
	</div>
</template>

<script lang="ts" setup>
const tag = ref<HTMLSpanElement>()

const props = defineProps({
	text: {
		type: String,
		default: null
	},
	theme: {
		type: String,
		default: null,
		required: false
	}
})

const setText = () => {
	tag.value!.innerText = props.text
}

const setTheme = () => {
	tag.value!.style.backgroundColor = props.theme
}

onMounted(() => {
	setText()
	setTheme()
})
</script>

<style lang="less" scoped>
.tag-wrapper {
	padding: 10px;
	background-color: skyblue;
	font-size: 18px;
	border-radius: 6px;
	color: #ffffff;
}
</style>
